<template>
  <div class="w-full">
    <div class="pb-2">
      <div class="flex flex-row items-center space-x-2 pb-4">
        <h1
          class="text-2xl font-bold text-blue-500 cursor-pointer"
          @click="goBack"
        >
          项目管理
        </h1>
        <span>&nbsp;-&nbsp;</span>
        <h1 class="text-2xl font-bold">任务管理</h1>
      </div>

      <n-form
        :model="formData"
        label-placement="left"
        label-width="80"
        label-align="right"
        inline
      >
        <n-form-item label="任务类型">
          <n-select
            v-model:value="formData.type"
            :options="taskTypeOptions"
            clearable
            w-20
          />
        </n-form-item>
        <n-form-item label="任务状态">
          <n-select
            v-model:value="formData.status"
            :options="taskStatusOptions"
            w-23
          />
        </n-form-item>
        <n-form-item label="负责人">
          <n-select
            v-model:value="formData.handler"
            :options="userOptions"
            clearable
            w-25
          />
        </n-form-item>
        <n-form-item label="任务时间">
          <n-date-picker
            v-model:value="taskTime"
            type="datetimerange"
            clearable
          />
        </n-form-item>
        <n-button type="primary" @click="getData">查询</n-button>
      </n-form>
    </div>
    <vxe-table :data="tableData" empty-text="没有更多数据了！">
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="name" title="名称"></vxe-column>
      <vxe-column field="type" title="类型"></vxe-column>
      <vxe-column field="status" title="状态"></vxe-column>
      <vxe-column field="handler" title="负责人"></vxe-column>
      <vxe-column field="created_at" title="创建时间"></vxe-column>
      <vxe-column field="updated_at" title="更新时间"></vxe-column>
      <vxe-column field="expected_at" title="预计完成时间"></vxe-column>
    </vxe-table>
  </div>
</template>

<script setup lang="ts">
import { watch, ref, reactive } from "vue";
import { NSelect, NDatePicker, NForm, NFormItem, NButton } from "naive-ui";
import type { TaskModel } from "@/api/task/model";
import type { QueryTaskParams } from "@/api/task/type";
import { getTaskList } from "@/api/task";
// import { getTeamList, getTeamUserList } from "@/api/team";
import type { SelectOption } from "naive-ui";

const props = defineProps<{
  projectId: number;
}>();

const emit = defineEmits<(e: "goBack") => void>();

const formData = reactive<QueryTaskParams>({
  project_id: props.projectId,
  page: 1,
  pageSize: 10,
  parent_id: 0,
  startTime: "",
  endTime: "",
  type: 0,
  name: "",
  status: 0,
  handler: [],
});

const tableData = ref<TaskModel[]>([]);
const taskTime = ref<[number, number] | null>(null);
const taskTypeOptions = ref<SelectOption[]>([
  {
    label: "全部",
    value: 0,
  },
  {
    label: "需求",
    value: 1,
  },
  {
    label: "缺陷",
    value: 2,
  },
  {
    label: "优化",
    value: 3,
  },
  {
    label: "其他",
    value: 4,
  },
]);
const taskStatusOptions = ref<SelectOption[]>([
  {
    label: "全部",
    value: 0,
  },
  {
    label: "未开始",
    value: 1,
  },
  {
    label: "进行中",
    value: 2,
  },
  {
    label: "已完成",
    value: 3,
  },
  {
    label: "已暂停",
    value: 4,
  },
  {
    label: "已延期",
    value: 5,
  },
  {
    label: "已解决",
    value: 6,
  },
]);
const userOptions = ref<SelectOption[]>([]);

const getData = async () => {
  await getTaskList(formData);
};

const goBack = () => {
  emit("goBack");
};

watch(
  () => props.projectId,
  (newVal) => {
    if (newVal) {
      getData();
    }
  },
);
</script>

<style scoped>
.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 300px;
}

.item-label {
  width: 100px;
}
</style>
